<template>
  <el-drawer
      :title="'关注列表（共 ' + allFenCount + ' 条）'"
      :model-value="drawerVisible"
      :width="500"
      @close="handleClose"
  >
    <!-- 粉丝表格：展示ID和时间 -->
    <el-table :data="followerList" stripe style="width: 100%">
      <el-table-column prop="userId" label="关注ID" width="100" />
      <el-table-column label="关注昵称" width="100">
        <template #default="scope">
          {{ scope.row.nickname || '加载中...' }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="关注时间" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="doDelete(scope.row.id)">取消关注</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineExpose,defineProps } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const parentUserId = ref('')
const allFenCount = ref(0)

const props = defineProps({
  parentMethod: {
    type: Function, // 等价于 { type: Function }
    required: true
  },

})
// 控制抽屉显示/隐藏
const drawerVisible = ref(false)
// 关注列表数据
const followerList = ref<any[]>([])
//删除关注
const doDelete = async (id: string) => {
  const {data}=await axios.delete(`/api/relation/${id}`)
  if (data > 0) {
    await handleDetailData(parentUserId.value)//刷新数据
   //刷新父组件数据
    props.parentMethod()
  }
}
// 父组件给子组件传递数据
const handleDetailData = async (userId: string) => {
  drawerVisible.value = true
  const relations = {
    id: '',
    fanId: userId,
    userId: '',
    time: ''
  }
  parentUserId.value = userId//重新传递数据
  await loadFollowerData(relations)
}
// 加载关注列表数据
const loadFollowerData = async (relations: any) => {
  const {data}=await axios.get('/api/relation', {
    params: relations
  })
  followerList.value = data,
  allFenCount.value = data.length
  for (const item of followerList.value){//获取昵称
    item.nickname = await getUserNameByFollowerId(item.userId)
  }
}
//获取昵称
const getUserNameByFollowerId = async (userId: string) => {
  // 直接调用用户接口（假设接口为/api/user/{id}，返回数据含nc字段）
  const { data } = await axios.get(`/api/user/${userId}`)
  return data.nc || '未知用户' // 昵称字段为nc，不存在则显示默认值
}


const handleClose = () => {
  drawerVisible.value = false
}
defineExpose( {handleDetailData
})


</script>


<style scoped>
</style>